{% load i18n %}
<form method="get" action="{% url index %}" id="search_box">
	<div class="wrapper">
		{{ searchform.as_table }}
		<button type="submit" class="search_btn"><img src="{{MEDIA_URL}}img/search_icon.png" title="Search" /></button>
	</div>
			<script>
			$(document).ready(function(){

			   $('.show_hide').showHide({
					speed: 2,  // speed you want the toggle to happen
					easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
					changeText: 1, // if you dont want the button text to change, set this to 0
					showText: '{% trans "Advanced Search / show"%}',// the button text to show when a div is closed
					hideText: '{% trans "Advanced Search / hide"%}' // the button text to show when a div is open
				});

			});
			</script>
				{% if filter_form %}
	   			<p><a href="#" class="show_hide" rel="#slidingDiv">{% trans "Advanced Search / show"%}</a></p>
				<div id="slidingDiv" style="display: none;">
			        {{ filter_form.as_p }}
			    </div>
				{% endif %}
</form>